<template>
  <nav>
    <el-menu
      default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :unique-opened=true
      @select="handleSelect"
    >
      <el-menu-item index="0">
        <a class="aui-flex-col aui-flex-middle aui-flex-center" href="javascript:;" @click="dealBack">
          <span class="icon SkinEditor iconleft" style="font-size: 16px;margin-top: -2px;"></span>
        </a>
      </el-menu-item>

      <el-menu-item index="1">壁纸&顶部</el-menu-item>

      <el-submenu index="2">
        <template slot="title">主题</template>
        <el-menu-item index="2-1">首页</el-menu-item>
        <el-menu-item index="2-2">搜索</el-menu-item>
        <el-menu-item index="2-3">详情</el-menu-item>
        <el-menu-item index="2-4">我的</el-menu-item>
      </el-submenu>

      <el-submenu index="3">
        <template slot="title">音乐</template>
        <el-menu-item index="3-1">收音机</el-menu-item>
        <el-menu-item index="3-2">智行电台</el-menu-item>
      </el-submenu>

      <el-submenu popper-class="appmenu" index="4">
        <template slot="title">首页</template>
        <el-menu-item index="4-1">第一屏</el-menu-item>
        <el-menu-item index="4-2">第二屏</el-menu-item>
        <el-menu-item index="4-3">第三屏</el-menu-item>
        <el-menu-item index="4-4">第四屏</el-menu-item>
      </el-submenu>

      <el-menu-item index="5">设置</el-menu-item>

      <!-- <el-submenu index="6">
        <template slot="title">控件</template>
        <el-menu-item index="6-1">通用设置</el-menu-item>
        <el-menu-item index="6-2">播放列表</el-menu-item>
        <el-menu-item index="6-6">语音搜索</el-menu-item>
        <el-menu-item index="6-7">猜你想听</el-menu-item>
        <el-menu-item index="6-3">弹框小</el-menu-item>
        <el-menu-item index="6-4">弹框中</el-menu-item>
        <el-menu-item index="6-5">弹框大</el-menu-item>
        <el-menu-item index="6-8">toast</el-menu-item>
      </el-submenu>  -->

      <!-- <el-submenu index="3">
        <template slot="title">服务</template>
        <el-menu-item index="3-1">车辆</el-menu-item>
        <el-menu-item index="3-2">美食</el-menu-item>
        <el-menu-item index="3-3">电影</el-menu-item>
        <el-menu-item index="3-4">酒店</el-menu-item>
        <el-menu-item index="3-5">景点</el-menu-item>
      </el-submenu>
      <el-submenu popper-class="appmenu" index="4">
        <template slot="title">应用中心</template>
        <el-menu-item index="4-1">第一屏</el-menu-item>
        <el-menu-item index="4-2">第二屏</el-menu-item>
        <el-menu-item index="4-3">第三屏</el-menu-item>
        <el-menu-item index="4-4">第四屏</el-menu-item>
      </el-submenu>
      <el-menu-item index="5">负一屏</el-menu-item>
      <el-submenu index="6">
        <template slot="title">控件</template>
        <el-menu-item index="6-1">通用设置</el-menu-item>
        <el-menu-item index="6-2">播放列表</el-menu-item>
        <el-menu-item index="6-6">语音搜索</el-menu-item>
        <el-menu-item index="6-7">猜你想听</el-menu-item>
        <el-menu-item index="6-3">弹框小</el-menu-item>
        <el-menu-item index="6-4">弹框中</el-menu-item>
        <el-menu-item index="6-5">弹框大</el-menu-item>
        <el-menu-item index="6-8">toast</el-menu-item>
      </el-submenu> -->
    </el-menu>
    <ul v-if="editable" class="aui-flex-col aui-flex-right">
      <!-- <li v-if="!managable"><span class="icon SkinEditor iconchehui" v-bind:class="{ active: cancelActive }"></span></li>
      <li v-if="!managable"><span class="icon SkinEditor iconzhongzuo" v-bind:class="{ active: redoActive }"></span></li> -->
      <li v-if="!managable" @click.stop="themeSave()" style="padding-top: 15px;" class="aui-flex-row aui-flex-middle aui-flex-center"><span class="icon SkinEditor iconbaocun1" v-bind:class="{ active: saveActive }"></span><span style="margin-top:-16px;">保存</span></li>
      <!-- <li v-if="managable" @click="themeExport" style="padding-top: 20px;" class="aui-flex-row aui-flex-center aui-flex-middle" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)"><span style="font-size: 18px;height: 20px!importent" class="icon SkinEditor icondownload2"></span><span style="font-size: 14px;height: 20px;margin-top: -20px;">导出</span></li>
      <li v-if="managable" @click="themePreview" style="padding-top: 20px;" class="aui-flex-row aui-flex-center aui-flex-middle" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)"><span style="font-size: 18px;height: 20px!importent" class="icon SkinEditor iconeye"></span><span style="font-size: 14px;height: 20px;margin-top: -20px;">预览</span></li> -->
      <li v-if="managable" @click="themeExport" style="padding-top: 20px;border-top:none!important;" class="aui-flex-row aui-flex-center aui-flex-middle"><span style="font-size: 18px;height: 20px!importent;color: #a1abb4!importent;" class="icon SkinEditor icondownload2"></span><span style="font-size: 14px;height: 20px;margin-top: -20px;color: #a1abb4!importent;">导出</span></li>
      <li v-if="managable" @click="themePreview" style="padding-top: 20px;border-top:none!important;" class="aui-flex-row aui-flex-center aui-flex-middle"><span style="font-size: 18px;height: 20px!importent;color: #a1abb4!importent;" class="icon SkinEditor iconeye"></span><span style="font-size: 14px;height: 20px;margin-top: -20px;color: #a1abb4!importent;">预览</span></li>
    </ul>
  </nav>
</template>

<script>
import eventBus from '../assets/js/event-bus.js'
/* eslint-disable no-new */
/* eslint-disable */
export default {
  data() {
    return {
      editable: true,
      preview: false,
      managable: false,
      activeIndex: 2,
      cancelActive: false,
      redoActive: false,
      saveActive: false
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
      eventBus.$emit('eventFromN', keyPath)
    },
    themeSave() {
      eventBus.$emit('themeSave', 1)
    },
    dealBack() {
      const that = this;
      if(that.editable || that.preview) {
        history.go(-1)
      } else {
        that.editable = true
        eventBus.$emit('eventEditable')
      }
      eventBus.$emit('themeSave', 0)
    },
    themeExport() {
      eventBus.$emit('eventExport')
    },
    themePreview() {
      eventBus.$emit('eventPreview')
    },
    getEventData() {
      const that = this
      eventBus.$on('eventPreview', function(flag) {
        that.editable = false
        if(flag) {
          that.preview = true;
        }
      })
    },
    GetQueryString(name) {
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); return null;
    }
  },
  mounted() {
    var _this = this
    _this.getEventData()
  },
  created() {
    var _this = this
    if(_this.GetQueryString('preview')) {
      _this.editable = false;
      _this.preview = true;
    }
    console.log('111123213' + _this.GetQueryString('manage'));
    if(_this.GetQueryString('manage')) {
      console.log(_this.GetQueryString('manage'));
      _this.managable = true;
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
nav {
  position: fixed;
  height: 70px;
  width: 100%;
  background-color: #f8f9fa;
}
.icon {
  width: 30px;
  height: 30px;
  font-size: 22px;
  color: #2c3e50;
}
.el-menu {
  background-color: transparent;
}
.el-menu.el-menu--horizontal {
  border-bottom: 0;
}
.el-menu--horizontal>.el-menu-item {
  height: 68px;
  line-height: 68px;
  border-top: 2px solid rgba(0,0,0,0);
  border-bottom: 0;
  padding: 0 20px;
  color: #2c3e50;
}
.el-menu--horizontal>.el-menu-item:hover {
  border-top: 2px solid #16a085;
}
.el-menu-item.is-active, .el-submenu.is-active {
  color: #16a085;
}
.el-menu--horizontal>.el-menu-item.is-active, .el-menu--horizontal>.el-submenu.is-active, .el-menu--horizontal>.el-submenu.is-opened {
  border-top: 2px solid #16a085;
  border-bottom: 0;
  background-color: #fff;
}
 .el-menu--horizontal>.el-submenu.is-opened {
  -webkit-box-shadow: 0 5px 12px 0 rgba(0,0,0,.1);
  box-shadow: 0 5px 12px 0 rgba(0,0,0,.1);
}
.el-menu--horizontal>.el-menu-item:first-child {
  width: 70px;
  height: 70px;
  border-top: 0;
  /* background-color: #fff; */
}
.el-menu--horizontal>.el-menu-item:first-child a {
  display: block;
  height: 70px;
}
.el-menu--horizontal>>>.el-submenu .el-submenu__title {
  height: 67px!important;
  line-height: 67px!important;
  border-top: 3px solid rgba(0,0,0,0)!important;
  border-bottom: 0!important;
  padding: 0 20px!important;
  color: #2c3e50;
}
.el-menu--horizontal>>>.el-submenu.is-opened .el-submenu__title {
  color: #16a085;
}

span.icon {
  transform: translate(0, -55%);
}
.el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-submenu.isopened .el-submenu__title {
  color: #2c3e50!important;
}

ul.aui-flex-col {
  float: right;
  height: 70px;
  padding-right: 301px;
  transform: translate(0, -55%);
  z-index: 100;
  margin-top: -32px;

}
ul.aui-flex-col li {
  padding: 0 17px;
  padding-top: 30px;
  width: 70px;
  font-size: 14px;
}
ul.aui-flex-col li:hover {
  background-color: #16a085;
}
ul.aui-flex-col li:hover .icon {
  color: #fff;
}
ul.aui-flex-col li .icon {
  font-size: 28px;
  color: #2c3e50;
}
ul.aui-flex-col li:last-child span.icon {
  font-size: 26px;
  color: #2c3e50;
}
ul.aui-flex-col li .icon:active {
  color: #fff;
}
ul.aui-flex-col li.aui-flex-middle:hover span {
  color: #fff;
}
@media screen and (max-width:850px) {
  ul.aui-flex-col {
    display: none;
  }
}
</style>



// WEBPACK FOOTER //
// src/components/Navbar.vue
